<template>
	<view class="baseBox">
		<view class="wraper">
			<view class="sbox" >
				<!-- <view>
					<vs-nav-bar fixed opacity >
						<view style="width: 100%;" slot="all">
							<view class="input-w" :class="{serchwrap:scrollTop>100?true:false,}">
								<view class="serch-icon">
									<u-icon name="search" color="#eee" size="40"></u-icon>
								</view>
								<input class="i-input" placeholder-style="color:#eee" placeholder="搜索"/>
							</view>
						</view>
					</vs-nav-bar>
				</view> -->
				<vs-ratio-view ratio="2.04/1">
					<vs-swiper imgMode="widthFix" :list="imgList.map(v=>v.imgPath)" indicatorDots autoplay></vs-swiper>
				</vs-ratio-view>
			</view>
			<view class="grid">
				<u-grid :col="5" :border="false">
					<u-grid-item @click="$Router.push({name:'school'})">
						<vs-img-icon url="/static/img/home_news.png"></vs-img-icon>
						<view class="grid-text">园所介绍</view>
					</u-grid-item>
					<u-grid-item @click="$Router.push({name:'person'})">
						<vs-img-icon url="/static/img/home_people.png"></vs-img-icon>
						<view class="grid-text">人物</view>
					</u-grid-item>
					<u-grid-item @click="$Router.push({name:'newsmsg'})">
						<vs-img-icon url="/static/img/home_news.png"></vs-img-icon>
						<view class="grid-text">新闻</view>
					</u-grid-item>
					<u-grid-item @click="$Router.push({name:'classes'})">
						<vs-img-icon  url="/static/img/home_school.png"></vs-img-icon>
						<view class="grid-text">同步课堂</view>
					</u-grid-item>
					<u-grid-item @click="$Router.push({name:'foodslist'})">
						<vs-img-icon url="/static/img/shipu.png"></vs-img-icon>
						<view class="grid-text">食谱</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="maqueen">
				<view class="m-w">
					<view>
						<vs-img-icon url="/static/img/home_notification_news.png"></vs-img-icon>
					</view>
					<view style="width: 100%;">
						<u-notice-bar @click="noticeClick" font-size="24" padding="0" :volume-icon="false"  more-icon mode="vertical" :list="msglist.map(v=>v.title)"></u-notice-bar>
						<u-notice-bar @click="noticeClick" font-size="24" padding="0" :volume-icon="false"  more-icon mode="vertical" :list="msglist.map(v=>v.content)"></u-notice-bar>
					</view>
				</view>
			</view>
			<view class="msw">
				<view class="msw-b">
					<vs-ratio-view  ratio="5.375/1">
						<image class="imgFull" src="../../static/img/home_banner.png"></image>
					</vs-ratio-view>
				</view>
			</view>
			<view class="switch">
				<view class="box">
					<view class="item item-1" @click="$Router.push({name:'videolist'})">
						<view class="left">
							<view class="bold">精彩视频</view>
							<view class="f-1">{{numObj.videoNUm}}个精彩瞬间</view>
						</view>
						<view class="right">
							<vs-img-icon :size="60" url="/static/img/work_horanz_video.png"></vs-img-icon>
						</view>
					</view>
					<view class="item item-2" @click="$Router.push({name:'imgwall'})">
						<view class="left">
							<view class="bold">照片</view>
							<view class="f-1">{{numObj.photoNUm}}张照片</view>
						</view>
						<view class="right">
							<vs-img-icon :size="60" url="/static/img/ic_photo_home.png"></vs-img-icon>
						</view>
					</view>
				</view>
			</view>
			<view>
				<img-list ref="imglist"></img-list>
			</view>     
			<view>
				<children-list ref="funList"></children-list>
			</view>
			
		</view>
		
		<view v-if="popShow" style="width: 100%;height: 100%;position: fixed;left: 0;top: 0;background: rgba(0,0,0,0.8);z-index: 100;">
			<view class="cbanner" style="width: 60%;">
				<view @click.stop="handleHidePopImg" class="hideimg">X</view>
				<!-- <view class="c-t">{{popInfo.title}}</view>
				<view class="c-content">{{popInfo.content}}</view> -->
				<view style="width: 100%;padding-top: 20rpx;">
					<image @click="handleNavGateToOther" :src="popInfo.imgPath" style="width: 100%;" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import childrenList from '../components/children-list'
	import imgList from '../components/imglist'
	import {getBannerImgs,getPhotoWallList,getYSmsgList,getBZmsgList,getIndexInfoNum,getAdvise} from '@/api/homeapi'
	export default {
		components:{childrenList,imgList},
		data() {
			return {
				scrollTop:0,
				listQuery:{
					page:1,
					rows:10
				},
				numObj:{},
				wallList:[],
				imgList: [],
				msglist:[],
				popInfo:{},
				popShow:false
				
				
			}
		},
		onLoad() {	
			this.getImgList()
			this.getmessage()
			this.getIndexInfoNumber()
			this.handleGetAdvise()
		},
		onPageScroll(e) {
			this.scrollTop=parseInt(e.scrollTop)
		},
		onReachBottom() {
			this.$refs.funList.getList()
		},
		methods: {
			handleHidePopImg(){
				this.popShow=false
			},
			handleGetAdvise(){
				getAdvise().then(res=>{
					console.log(res);
					if(res.data){
						this.popShow=true
						this.popInfo=res.data
					}
				})
			},
			handleNavGateToOther(){
				uni.navigateToMiniProgram({
				  appId: this.popInfo.appId,
				  path: this.popInfo.appPath,
				  extraData: {
				    'data1': 'test'
				  },
				  success:res=>{
				    // 打开成功
					this.popShow=false
				  }
				})
			},
			getIndexInfoNumber(){
				getIndexInfoNum({bjId:uni.getStorageSync('userInfo').bjId||'',role:uni.getStorageSync('userInfo').roleId}).then(res=>{
					console.log(res);
					this.numObj = res.data
					
				})
			},
			getImgList(){
				getBannerImgs().then(res=>{
					console.log(res);
				if(res.code==1){
					res.data.forEach(v=>v.imgPath = this.$Store.baseUrl + v.imgPath)
				}
				this.imgList = res.data
				})
			},
			getmessage(){
				uni.getStorageSync('userInfo').roleId==='xs'?this.getXsMessage():this.getYsMessage()
			},
			getYsMessage(){
				getYSmsgList({page:1,rows:10}).then(res=>{
					console.log(res);
					this.msglist = res.data
				})
			},
			getXsMessage(){
				getBZmsgList({page:1,rows:10}).then(res=>{
					console.log(res);
					this.msglist = res.data
				})
			},
			
			noticeClick(e){
				console.log(e);
				
				this.$Router.push({name:'messagedetail',params:{info:this.msglist[e]}})
				
			}
		
		
			
			
		}
	}
</script>

<style lang="scss">
	.serchwrap{
		//top: -100px;
		opacity: 0;
		transition: all .8s;
	}
	.cbanner{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		transition: all 0.5s;
		.c-t{
			color: #fff;
			text-align: center;
			margin-top: 50rpx;
		}
		.c-content{
			color: #fff;
			margin-top: 20rpx;
			text-align: center;
			transform: scale(0.8);
		}
		.hideimg{
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			bottom: -50px;
			position: absolute;
			color: #fff;
			font-size: 40rpx;
			left: 50%;
			transform: translateX(-50%);
			
		}
	}
	.wraper{
		.sbox{
			width: 100%;
			
		
			.input-w{
				width: 100%;
				padding-left: 10px;
				position: relative;
				
				.i-input{
					width: 100%;
					height: 56rpx;
					background:rgba(236, 236, 236, 0.5);
					
					border-radius: 8rpx;
					padding-left: 70rpx;
					color: #eee;
				}
				.serch-icon{
					width: 56rpx;
					height: 56rpx;
					position: absolute;
					z-index: 11;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
		.grid{
			.grid-text{
				margin-top:8px;
				font-size: 28rpx;
			}
		}
		.maqueen{
			width: 100%;
			margin: 0 auto;
			background-color: #fff;
			.m-w{
				display: flex;
				align-items: center;
				width: 90%;
				margin: 0 auto;
			}
		}
		.msw{
			width: 100%;
			background-color: #fff;
			.msw-b{
				width: 90%;
				margin: 0 auto;
				padding: 20px 0;
			}
		}
		.switch{
			width: 100%;
			background: #fff;
			.box{
				width: 90%;
				display: flex;
				margin: 0 auto;
				justify-content: space-between;
				.item{
					width: 48%;
					display: flex;
					font-size: 16px;
					color: #363636;
					align-items: center;
					border-radius: 8px;
					overflow: hidden;
					justify-content: space-between;
					padding: 0 0 0 8px;
					
					.f-1{
						font-size: 12px;
						color: #888;
					}
				}
				.item-1{background: url('/static/img/work_backg_blue.png') no-repeat;background-size: 100%;}
				.item-2{background: url('/static/img/work_backg_pink.png') no-repeat;background-size: 100%;}
			}
		}
		
		
	
	
	}
	@keyframes serch_animation {
		0%{opacity: 1;}
		100%{opacity: 0;}
	}
</style>
